<template>
  <!-- :style="$store.state.isExtend == true ? 'width: 80%;' : 'width: 100%;'" -->
  <div class="my-table">
    <u-table
      v-if="show.fields && show.tableData"
      id="table"
      ref="elTable"
      row-key="id"
      :data="show.tableData"
      border
      header-row-name="table-header"
      class="main"
      :use-virtual="useVirtual"
      :height="tableMaxHeight"
      @row-click="rowSelected"
    >
      <u-table-column
        v-for="(item, index) in show.fields"
        :key="index"
        :sortable="item.sortable"
        :filters="item.filters"
        :filter-method="item.filterHandler"
        :prop="item ? item.name : ''"
        :label="item ? item.title : ''"
        :width="item.width ? item.width : ''"
        :render-header="renderheader"
        :align="item.align || 'left'"
        :tree-node="item.treeNode"
      >
        <template v-if="item.names" v-slot="{ row }">
          <div v-for="(name, index2) in item.names" :key="index2">
            {{ row[name] }}
          </div>
        </template>
        <template v-else v-slot="{ row }">
          <span>{{
            (item.valueHandler && item.valueHandler(row[item.name])) ||
            row[item.name]
          }}</span>
        </template>
      </u-table-column>

      <u-table-column
        v-if="show.rowAction && show.rowAction.length != 0 && action.pp == true"
        fixed="right"
        label="操作"
        :width="show.rowAction.length * 80"
        align="center"
      >
        <template slot-scope="scope">
          <!-- <el-button
            v-if="scope.row.sort != 1"
            @click="onAction(scope.row, show.rowAction[1].name)"
            type="text"
            size="small"
            >{{ show.rowAction[1].title }}</el-button
          >
          <el-button
            v-else
            @click="onAction(scope.row, item1.name)"
            type="text"
            size="small"
            v-for="(item1, index) in show.rowAction"
            :key="index"
            >{{ item1.title }}</el-button
          > -->
          <template v-for="(item1, index) in show.rowAction">
            <template v-if="!item.showFunc || item.showFunc(scope.row)">
              <el-button
                v-if="
                  (item1.appearRow &&
                    item1.appearRow.indexOf(scope.row.sort) != -1) ||
                  !item1.appearRow
                "
                :key="index"
                type="text"
                size="small"
                @click="onAction(scope.row, item1.name)"
                >{{ item1.title }}</el-button
              >
            </template>
          </template>
        </template>
      </u-table-column>
      <u-table-column
        v-if="
          show.rowAction && show.rowAction.length != 0 && action.pp == false
        "
        fixed="right"
        label="操作"
        :width="show.rowAction.length * 100"
        align="center"
      >
        <template slot-scope="scope">
          <template v-for="(item, index) in show.rowAction">
            <template v-if="!item.showFunc || item.showFunc(scope.row)">
              <el-button
                :key="index"
                type="text"
                size="small"
                @click="onAction(scope.row, item.name)"
                >{{ item.title }}</el-button
              >
            </template>
          </template>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import autoAdaptHeightMixin from './autoAdaptHeightMixin'
import { UTable, UTableColumn } from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css'

export default {
  components: {
    UTable,
    UTableColumn
  },
  mixins: [autoAdaptHeightMixin],
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    fields: {
      type: Array,
      default: () => []
    },
    rowAction: {
      type: Array,
      default: () => []
    },
    rowClick: {
      type: Function,
      default: () => {}
    },
    isSort: {
      type: Boolean,
      default: false
    },
    pp: {
      type: Boolean,
      default: false
    },
    useVirtual: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: {
        tableData: [],
        fields: null,
        rowAction: null
      },
      action: {
        rowClick: null,
        sortData: [],
        isSort: false,
        pp: false
      }
    }
  },
  watch: {
    tableData: function (newValue) {
      this.show.tableData = newValue
    },
    fields: function (newValue) {
      this.show.fields = newValue
    }
  },
  updated() {
    this.$refs.elTable.doLayout()
  },
  created() {
    this.dataInit()
    this.dataFilter()
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    renderheader(h, { column }) {
      // return h("span", {}, [
      //   h("span", {}, column.label.split("/")[0]),
      //   h("br"),
      //   h("span", {}, column.label.split("/")[1]),
      // ]);
      return h(
        'span',
        {},
        column.label
          .split('/')
          .map((title) => h('div', { class: 'wrap-title' }, title))
      )
    },
    /* 行拖拽排序 */
    rowDrop() {
      if (this.action.isSort == false) {
        return
      }
      let _this = this

      let el = document.querySelector('.el-table__body-wrapper table tbody')
      let ops = {
        animation: 1000,
        draggable: '.el-table__row',
        onEnd: function ({ newIndex, oldIndex }) {
          const currRow = _this.action.sortData.splice(oldIndex, 1)[0]
          _this.action.sortData.splice(newIndex, 0, currRow)
          _this.show.tableData = _this.action.sortData
        }
      }
      Sortable.create(el, ops)
      this.$refs.elTable.doLayout()
    },
    /* 数据过滤 */
    dataFilter() {
      this.show.fields = this.show.fields.filter((n) => n)
    },
    /* 行内操作绑定方法 */
    onAction(row, actionName) {
      this.show.rowAction = this.rowAction
      this.show.rowAction.map((item) => {
        if (item.name == actionName) {
          item.func(row)
          return
        }
      })
    },
    /* 行内被点击绑定方法 */
    rowSelected(row, column, event) {
      this.action.rowClick(row, column, event)
    },
    /* 初始化数据 */
    dataInit() {
      this.show.tableData = this.tableData ? this.tableData : []
      this.show.rowAction = this.rowAction ? this.rowAction : []
      this.show.fields = this.fields ? this.fields : []
      this.action.rowClick = this.rowClick ? this.rowClick : () => {}
      this.action.isSort = this.isSort ? this.isSort : false
      this.action.pp = this.pp ? this.pp : false
    }
  }
}
</script>
